<template>
  <div>
    <el-select v-model="chapterId" placeholder="请选择" @change="selectChange">
    <el-option
      v-for="(item,index) in chapterList"
      :key="index"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane v-for="(item,index) in modelList" :key="index" :label="item.name" :name="String(item.id)">
        {{ item.name }} <span :class="{'red':maxCount == nowCount}">{{ nowCount }}/{{ maxCount }}</span>
        <el-table
          :ref="String(item.id)"
          :data="item.list"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @select="tableSelect">
          <el-table-column
            type="selection"
            width="55"
            :selectable="selectTable">
          </el-table-column>
          <el-table-column
            prop="id"
            label="id">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="num"
            label="数量"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      //选项卡当前题型 与传入题型的type相同
      activeName: "1",
      //当前表格最大选择数量
      maxCount: 2,
      //当前表格已选择数量
      nowCount: 0,
      //章节的v-model值 用于查看当前章节id
      chapterId: "",
      //带章节模板,题目分数 用于赋值所有题型分数
      chapterModelScore: [
        {
          type: 1,
          name: "选择题",
          score: 5
        },
        {
          type: 2,
          name: "判断题",
          score: 15
        },
        {
          type: 1,
          name: "填空题",
          score: 25
        }
      ],
      //模板带过来的
      chapterModel: [
        {
          id: 1,
          name: "第一章",
          content: [
            {
              type: 1,
              name: "选择题",
              questionNum: 2,
              questionIdList: []
            },
            {
              type: 3,
              name: "填空题",
              questionNum: 2,
              questionIdList: []
            }
          ]
        },
        {
          id: 3,
          name: "第三章",
          content: [
            {
              type: 2,
              name: "判断题",
              questionNum: 2,
              questionIdList: []
            },
            {
              type: 3,
              name: "填空题",
              questionNum: 5,
              questionIdList: []
            }
          ]
        }
      ],
      //章节列表
      chapterList: [],
      //初始化题目列表 用于展示当前列表
      modelList: []
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getChapterList();
      this.filterChapterList();
      this.getList();
    },
    //章节切换
    selectChange(val) {
      this.getList();
      this.tabClick();
    },
    //回填??
    //切换tab时回填？切换章节回填？
    // upDataChecked() {
    //   console.log(this.modelList);
    // },
    //获取章节列表 用于select获取章节数据
    getChapterList() {
      let that = this;
      //获取到的章节列表
      let chapterList = [
        {
          id: 1,
          name: "第一章"
        },
        {
          id: 2,
          name: "第二章"
        },
        {
          id: 3,
          name: "第三章"
        }
      ];
      that.chapterList = chapterList;
    },
    //过滤章节列表
    filterChapterList() {
      let that = this;
      //带章节模板，章节题目数量
      let chapterModel = that.chapterModel;
      let chapterList = that.chapterList;
      //a.filter(v => b.includes(v))
      //includes var boolean = array.includes(searchElement[, fromIndex]); 数组是否包含指定元素
      //some var boolean = array.some(item=>item.x == 15); 数组对象是否为指定值
      //过滤掉模板中没有的章节
      let newChapterList = chapterList.filter(item =>
        chapterModel.some(item2 => item.id === item2.id)
      );
      that.chapterList = newChapterList;
      //默认第一个章节
      that.chapterId = that.chapterList[0].id;
    },
    //获取数据列表 用于获取table数据 发送章节id 获取后赋值给modelList
    getList() {
      //给modelList赋值对应章节列表数据
      let that = this;
      //所有章节 题目列表
      let chapterModelList = [
        {
          id: 1,
          name: "第一章",
          content: [
            {
              name: "选择题",
              type: 1,
              id: 1,
              maxCount: 2,
              nowCount: 0,
              list: [
                {
                  id: 1,
                  type: 1,
                  price: 5,
                  num: 6
                },
                {
                  id: 2,
                  type: 1,
                  price: 55,
                  num: 146
                },
                {
                  id: 3,
                  type: 1,
                  price: 51,
                  num: 63
                }
              ]
            },
            {
              name: "判断题",
              maxCount: 1,
              nowCount: 0,
              type: 2,
              id: 2,
              list: [
                {
                  id: 4,
                  type: 2,
                  price: 51,
                  num: 63
                },
                {
                  id: 5,
                  type: 2,
                  price: 51,
                  num: 63
                },
                {
                  id: 6,
                  type: 2,
                  price: 51,
                  num: 63
                }
              ]
            },
            {
              name: "填空题",
              maxCount: 4,
              nowCount: 0,
              type: 3,
              id: 3,
              list: [
                {
                  id: 7,
                  type: 3,
                  price: 51,
                  num: 62
                },
                {
                  id: 8,
                  type: 3,
                  price: 153,
                  num: 164
                },
                {
                  id: 9,
                  type: 3,
                  price: 153,
                  num: 164
                },
                {
                  id: 10,
                  type: 3,
                  price: 153,
                  num: 164
                },
                {
                  id: 11,
                  type: 3,
                  price: 153,
                  num: 164
                },
                {
                  id: 12,
                  type: 3,
                  price: 153,
                  num: 164
                }
              ]
            }
          ]
        },
        {
          id: 3,
          name: "第三章",
          content: [
            {
              name: "选择题",
              type: 1,
              id: 1,
              maxCount: 3,
              nowCount: 0,
              list: [
                {
                  id: 1,
                  type: 1,
                  price: 5,
                  num: 6
                },
                {
                  id: 2,
                  type: 1,
                  price: 55,
                  num: 146
                },
                {
                  id: 3,
                  type: 1,
                  price: 51,
                  num: 63
                }
              ]
            },
            {
              name: "判断题",
              maxCount: 1,
              nowCount: 0,
              type: 2,
              id: 2,
              list: [
                {
                  id: 4,
                  type: 2,
                  price: 51,
                  num: 63
                },
                {
                  id: 5,
                  type: 2,
                  price: 51,
                  num: 63
                },
                {
                  id: 6,
                  type: 2,
                  price: 51,
                  num: 63
                }
              ]
            },
            {
              name: "填空题",
              maxCount: 4,
              nowCount: 0,
              type: 3,
              id: 3,
              list: [
                {
                  id: 7,
                  type: 3,
                  price: 51,
                  num: 62
                },
                {
                  id: 8,
                  type: 3,
                  price: 153,
                  num: 164
                },
                {
                  id: 9,
                  type: 3,
                  price: 153,
                  num: 164
                },
                {
                  id: 10,
                  type: 3,
                  price: 153,
                  num: 164
                },
                {
                  id: 11,
                  type: 3,
                  price: 153,
                  num: 164
                },
                {
                  id: 12,
                  type: 3,
                  price: 153,
                  num: 164
                }
              ]
            }
          ]
        }
      ];
      //章节id
      let chapterId = that.chapterId;
      //用于展示的列表
      let modelList = [];
      //找到对应章节对象
      let modelListObj = chapterModelList.find(item => item.id == chapterId);
      //将章节中的数据赋值给展示列表
      modelList = modelListObj.content;
      that.modelList = modelList;

      that.filterList();
    },
    //过滤题型列表
    //只显示模板里有的题型
    filterList() {
      let that = this;
      //获取当前展示列表
      let modelList = that.modelList;
      let chapterId = that.chapterId;
      let chapterModel = that.chapterModel;
      //获取当前章节题型模板
      let questionModelList = chapterModel.find(item => item.id === chapterId)
        .content;
      let newModelList = modelList.filter(item =>
        questionModelList.some(item2 => item.type === item2.type)
      );
      that.modelList = newModelList;
      //默认到有题的第一个题型
      that.activeName = String(that.modelList[0].type);
    },
    //选项卡切换，切换题，更新maxCount和nowCount
    tabClick() {
      let that = this;
      //改变maxCount 和 nowCount
      that.tabUpDataCount();
      //回填
      that.tabCheckbox();
    },
    //切换选项卡改变maxCount 和 nowCount
    tabUpDataCount() {
      let that = this;
      let chapterModel = that.chapterModel;
      let chapterId = that.chapterId;
      let questionType = Number(that.activeName);
      //查找题型对象 chapterModel -> content -> questionIdList
      //nowCount = questionIdList.length
      //maxCount = content.questionNum
      let content = chapterModel
        .find(item => item.id === chapterId)
        .content.find(item => item.type === questionType);
      let questionNum = content.questionNum;
      let idList = content.questionIdList;

      //赋值最大选项和现在选项个数
      that.maxCount = questionNum;
      that.nowCount = idList.length;
    },
    tabCheckbox() {
      let that = this;
      let modelList = that.modelList;
      let chapterModel = that.chapterModel;
      //当前章节
      let chapterId = that.chapterId;
      //当前题型
      let questionType = Number(that.activeName);
      //当前章节，当前题型已选中的idlist
      let idList = chapterModel
        .find(item => item.id === chapterId)
        .content.find(item => item.type === questionType).questionIdList;
      //找到当前题型列表
      let nowQuestionList = modelList.find(item => item.type === questionType)
        .list;
      //找到被勾选对象数组
      nowQuestionList.forEach(item => {
        let isChecked = idList.some(item2 => item.id === item2);
        if (isChecked) {
          item.isChecked = true;
          that.$nextTick(function() {
            that.$refs[that.activeName][0].toggleRowSelection(item, true);
          });
        }
      });
    },
    //禁用
    selectTable(row, index) {
      let that = this;
      let maxCount = that.maxCount;
      let nowCount = that.nowCount;
      if (maxCount == nowCount) {
        return row.isChecked;
      } else {
        return 1;
      }
    },
    //单选 存储勾选的id
    tableSelect(rows, row) {
      let that = this;
      //单选存储id
      let nowCount = that.tableSelectUpdateId(rows, row);

      //更新nowCount的值,给选中的添加属性isChacked:true
      that.tableSelectUpdateChecked(rows, row, nowCount);
    },
    //单选存储id
    tableSelectUpdateId(rows, row) {
      let that = this;
      //选中状态
      let selected = rows.length && rows.indexOf(row) !== -1;
      let rowId = row.id;
      //获取idList
      //存储的大数组
      let chapterMode = that.chapterModel;
      //当前章节
      let chapterId = that.chapterId;
      //当前题型
      let questionType = Number(that.activeName);
      let idList = chapterMode
        .find(item => item.id === chapterId)
        .content.find(item => item.type === questionType).questionIdList;

      if (selected) {
        //存入指定位置,存入chapterModel -> content -> questionIdList
        idList.push(rowId);
      } else {
        //在指定位置删除
        idList.splice(idList.findIndex(item => item === rowId), 1);
      }
      return idList.length;
    },
    //更新nowCount的值,给选中的添加属性isChacked:true
    tableSelectUpdateChecked(rows, row, nowCount) {
      let that = this;
      row.isChecked = !row.isChecked;
      that.nowCount = nowCount;
    },
    handleSelectionChange(val) {
      let that = this;
    }
  }
};
</script>
<style>
.red {
  color: red;
}
thead .el-checkbox {
  display: none;
}
</style>
